<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>评论详情</title>
    <head th:insert="~{admin/import :: layui-ADES}"></head>

    <style type="text/css">
        .layui-table > tr {
            text-align: center;
        }
    </style>
</head>

<body>
<fieldset class="layui-elem-field layui-field-title"
          style="margin-top: 20px;">
    <legend>查看评论详情</legend>
</fieldset>

<form class="layui-form layui-form-pane" action="/admin/user/saveUser"
      enctype="multipart/form-data" style="width: 55%; float: left;">

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">所属编号</label>
            <div class="layui-input-inline" style="width: 226px">
                <input type="text" name="parent_id" autocomplete="off"
                       class="layui-input" value=""/>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">作者</label>
            <div class="layui-input-inline" style="width: 226px">
                <input type="text" name="uname" autocomplete="off"
                       class="layui-input" value=""/>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">创建时间</label>
            <div class="layui-input-block" style="width:226px">
                <input type="text" name="gmtCreateTime" autocomplete="off"
                       class="layui-input" value=""/>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">更新时间</label>
            <div class="layui-input-block" style="width:226px">
                <input type="text" name="gmtModifiedTime" autocomplete="off"
                       class="layui-input" value=""/>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">评论数</label>
            <div class="layui-input-inline" style="width: 226px">
                <input type="text" name="commentCount" autocomplete="off"
                       class="layui-input" value=""/>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">点赞数</label>
            <div class="layui-input-inline" style="width: 226px">
                <input type="text" name="likeCount" autocomplete="off"
                       class="layui-input" value=""/>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">评论分类</label>
            <div class="layui-input-inline" style="width: 226px">
                <select name="type" id="type">
                    <option value="">请选择评论分类</option>
                    <option value="1">一级评论</option>
                    <option value="2">二级评论</option>
                </select>
            </div>
        </div>
    </div>

    <br><br>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">评论内容</label>
        <div class="layui-input-block" id="content" style="align-content: center">

        </div>
    </div>

    <div class="layui-form-item">
        <div style="text-align: center;">
            <input type="hidden" name="id" th:value="${commentId}"/>
        </div>
    </div>

</form>


<script src="/plugins/layui/layui.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

<script>

    layui.config({
        base: '/build/js/',
        version: '1.0.1'
    }).use(['jquery', 'form', 'layedit', 'laydate', 'element', 'upload'], function () {
        var form = layui.form
            , $ = layui.$
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate
            , upload = layui.upload;


        var Id = $("input[name='id']").val();
        if (Id != null && Id != "") {
            $.ajax({
                url: '/admin/comment/searchCommentDetail',
                data: {'id': Id},
                type: 'post',
                dataType: 'json',
                success: function (res) {
                    if (res.code == 200) {
                        var data = res.data;
                        $("input[name='parentId']").attr("disabled","disabled").val(data.parentId);
                        $("input[name='uname']").attr("disabled","disabled").val(data.uname);
                        $("input[name='commentCount']").attr("disabled","disabled").val(data.commentCount);
                        $("input[name='likeCount']").attr("disabled","disabled").val(data.likeCount);
                        $("input[name='gmtModifiedTime']").attr("disabled","disabled").val(data.gmtModifiedTime);
                        $("input[name='gmtCreateTime']").attr("disabled","disabled").val(data.gmtCreateTime);
                        $("select[name='type']").attr("disabled","disabled").val(data.type);
                        $("#content").attr("disabled","disabled").html(data.content);

                        form.render();
                    } else {
                        layer.msg(res.message);
                    }
                },
                error: function () {
                    layer.msg("评论信息编辑异常");
                }
            })
        }


        //日期
        laydate.render({
            elem: '#startTime'
            , type: 'datetime'
            , min: '2018-1-1'
            , max: '2099-12-31'
        });
        laydate.render({
            elem: '#endTime'
            , type: 'datetime'
            , min: '2018-1-1'
            , max: '2099-12-31'
        });

        //创建一个编辑器
        var editIndex = layedit.build('LAY_demo_editor');

        form.on('select(demo2)', function(data){
            console.log(data.elem); //得到select原始DOM对象
            console.log(data.value); //得到被选中的值
            console.log(data.othis); //得到美化后的DOM对象
        });

        //自定义验证规则
        form.verify({
            user_name: function(value, item){ //value：表单的值、item：表单的DOM对象
                if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
                    return '用户名不能有特殊字符';
                }
                if(/(^\_)|(\__)|(\_+$)/.test(value)){
                    return '用户名首尾不能出现下划线\'_\'';
                }
                if(/^\d+\d+\d$/.test(value)){
                    return '用户名不能全为数字';
                }
            },
            telephone: function (value) {
                if (value.length != 11) {
                    return '手机格式不标准';
                }
                if(!(/^\d+\d+\d$/.test(value))){
                    return '手机号只能为正整数';
                }
                var msg;
                // $.ajax({
                //     "async": false,
                //     "url": "/user?method=checkTelephone",
                //     "data": {
                //         "telephone": value
                //     },
                //     "type": "POST",
                //     "dataType": "json",
                //     "success": function(data) {
                //         if(data.code != 0) {
                //             msg = data.msg;
                //         }
                //     }
                // });
                return msg;
            }
        });
        //监听指定开关
        form.on('switch(switchTest)', function (data) {
            layer.msg('开关checked：' + (this.checked ? 'true' : 'false'), {
                offset: '6px'
            });
            layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
        });

    });
</script>

</body>


</html>